<template>
  <div
    class="markdown-body"
    style="font-size: 14px"
    @click="copy"
    v-html="md.render(source)"
  />
</template>
<script>
import MarkdownIt from 'markdown-it'
import MarkdownItAbbr from 'markdown-it-abbr'
import MarkdownItAnchor from 'markdown-it-anchor'
import MarkdownItFootnote from 'markdown-it-footnote'
import hljs from 'highlight.js'
import MarkdownItSub from 'markdown-it-sub'
import MarkdownItSup from 'markdown-it-sup'
import MarkdownItTasklists from 'markdown-it-task-lists'
import MarkdownItTOC from 'markdown-it-toc-done-right'
import ClipboardJS from 'clipboard'
import 'highlight.js/styles/atom-one-dark.css'

export default {
  name: 'Markdown',
  props: {
    source: {
      type: String,
      default: ''
    },
    loading: {
      type: Boolean
    }
  },
  data() {
    return {
      aiValue: '',
      md: null
    }
  },
  created() {
    const that = this

    that.md = new MarkdownIt({
      html: true
    })
      .use(MarkdownItAbbr)
      .use(MarkdownItAnchor)
      .use(MarkdownItFootnote)
      .use(MarkdownItSub)
      .use(MarkdownItSup)
      .use(MarkdownItTasklists)
      .use(MarkdownItTOC)
    that.md.set({
      highlight: function(str, lang) {
        if (lang && hljs.getLanguage(lang)) {
          try {
            return `<div class="code-block"><pre class="hljs"><code>${
              hljs.highlight(lang, str, true).value
            }</code></pre><button class="copy-btn" id='copy'>复制</button><button id ='execute'>应用</button></div>`
          } catch (__) {}
        }
      }
    })
  },
  methods: {
    copyEl(text) {
      const input = document.createElement('textarea')
      input.value = text
      document.body.appendChild(input)
      input.select()
      document.execCommand('copy')
      document.body.removeChild(input)
    },
    async copy(e) {
      const { tagName, id } = e.target
      const clipboard = new ClipboardJS(e.target, {
        text: function() {
          return id == 'copy'
            ? e.target.previousElementSibling.textContent
            : e.target.previousElementSibling.previousElementSibling
              .textContent
        }
      })
      if (tagName == 'BUTTON' && id == 'copy') {
        this.copyEl(clipboard.text())
        this.$message.success('复制成功')
      }
      if (tagName == 'BUTTON' && id == 'execute') {
        this.$emit('applySink', clipboard.text())
        this.$message.success('已应用于目标ddl')
      }
    }
  }
}
</script>

<style lang="scss">
.markdown-body {
  box-sizing: border-box;
  min-width: 200px;
  max-width: 980px;

  .code-block {
    padding: 0 !important;
    background: rgb(42, 52, 62) !important;
    border-radius: 10px !important;

    button {
      margin: 10px !important;
    }

    pre {
      overflow: auto;
      padding: 10px;
      border-top-left-radius: 10px;
      border-top-right-radius: 10px;
      margin: 0;
    }
  }
  li {
    margin: 10px 0 !important ;
  }
}

.markdown-body > * {
  margin: 10px 0 !important;
}

@media (max-width: 767px) {
  .markdown-body {
    padding: 15px;
  }
}
</style>
